<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/vue.js"></script>

</head>
<body>



<div id="app">

    <h1>{{list}}</h1>

</div>


<script>
    //数据劫持 转成 getter 和 setter
    let vm = new Vue({
        el: '#app',
        data:{  //只用计划好的数据,才能做响应 reactive
          list:[1,2,3]
        },
        methods:{

        }

    });
    /**
     * 提供了观察数组的变异方法,使用这些方法将会触发视图更新
     * push()
     * pop()
     * shift()
     * unshift()
     * splice()
     * sort()
     * reverse()
     * 会改变原数组
     */

    vm.list.push(1000)

    // 不对改变原数组
    vm.list.map(item=>item*2);
    vm.list =  vm.list.map(item=>item*2);
    // 通过下标改变值,不可以
    vm.list[0]='miaov'
    // 可以这样使用
    vm.list.splice(0,1,"miaov");
    // length 不能改变原数组
    //vm.list.length = 1;



</script>


</body>
</html>